<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <title>石园地图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <script src="/js/street/chooseMap.js"></script>
    <style>
        .formUl li label {
            float: left;
            width: 150px;
            vertical-align: middle;
            height: 34px;
            line-height: 34px;
            text-align: right;
            font-size: 14px;
        }
        .formUl li input[type=text]{
            border:1px solid #ddd;
        }
        .layerbox{
            width: 280px;
            margin: 0 auto;
            border-bottom: 1px solid #ccc;
            position: relative;
            padding-bottom: 6px;
        }
        .username{
            position: absolute;
            margin-left: 20px;
            font-size: 16px;
            font-weight: 600;
            margin-top: 2px;
        }
        .userposition{
            position: absolute;
            margin-left: 20px;
            margin-top: 24px;
            font-size: 12px;
            color: #999;
            padding-left: 20px;
        }
        .layui-layer-btn-{
            display: none;
        }
        .spantextbox{
            padding-left: 0px;
            padding-top: 10px;
        }
        .spantextbox li{
            line-height: 21px;
            color: #666;
            margin: 10px 0;
        }
        .locationtext{
            display: block;
            width: 210px;
            position: absolute;
            top: 0px;
            left: 70px;
            line-height: 23px;
        }
        .spanimg{
            position: absolute;
            top: 2px;
            left: -1px;
        }
        .spanimgs{
            position: absolute;
            top: 2px;
            left: 0;
        }
        .mainRight{
            width: 100%;
        }
        .btnFixed{
            top: 1%;
            right: 1%;
        }
        .seeVideo{
            position: fixed;
            top: 1%;
            right: 7%;
            z-index: 9999;
            /*display: none;*/
            background: url(/img/map/see.png) no-repeat;
            width: 82px;
            line-height: 36px;
            color:#fff;
            text-align: center;
            font-size: 14px;
            height: 36px;
            cursor: pointer;
        }
        .seeVideo:hover{
            background: url(/img/map/seeTwo.png) no-repeat;
        }
        .zhanshiBtn{
            top: 20%;
            right: 1%;
        }
        .zhanshiBtn .one{
            width: 96%;
        }
        .zhanshiBtn .one:hover{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .qiyeType{
            top:9%;
            left:8%;
            position: fixed;
            width: 135px;
            height: 220px;
            display: none;
        }
        .qiyeType .two{
            width: 96%;
            background: url(/img/grid/btnxuanzhong.png) no-repeat;
            background-size: 100% 100%;
            /*-ms-behavior: url(/css/main/backgroundsize.min.htc);*/
            /*behavior: url(/css/main/backgroundsize.min.htc);*/
            height: 34px;
            line-height: 34px;
            margin-top: 10px;
            cursor: pointer;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
        .qiyeType .active{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }


        .qiyeType .two:hover{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }


        @media screen and (max-width: 1100px){
            .layui-layer-iframe {
                overflow-y: no-display!important;
                -webkit-overflow-scrolling: touch;
            }

        }
        .layui-layer-setwin .layui-layer-close2{
            z-index: 9999999999;
        }
        /*.outer{*/
        /*width:119px;*/
        /*height:43px;*/
        /*background-image: url(../../img/map/oil.png);*/
        /*z-index: 9999;*/
        /*}*/
        .txt{
            color: #fff;
            font-size: 14px;
            display: inline-block;
            width: 73px;
            text-align: center;
            line-height: 36px;
            padding-left: 40px;
            padding-top: 4px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        /*#AlaMap$Layer$BoxTop span{*/
        /*background: none!important;*/
        /*border:none!important;*/
        /*color: #fff;*/
        /*}*/
        .list li{
            width:100%;
            padding:5px;
            cursor:pointer;
        }
        .list li img{
            vertical-align: middle;
        }
        .list li span{
            font-size:16px;
            padding-right:10px;
        }
        .ding{
            display: inline-block;
            margin-left: -32px;
            color: #fff;
            text-align: center;
            width:30px;
        }
        .hot{
            white-space: nowrap;
            background-color: #e1e1e1;
            border: 1px solid #CCC;
            padding: 0 3px;
            height: 17px;
            line-height: 17px;
            cursor: pointer;
            font-size: 12px;
        }
        .layui-layer-btn{
            /*display: block!important;*/
        }
        .sure{
            background: #2F8AE3;
            padding: 5px 14px;
            color: #fff;
            border-radius: 3px;
            font-size: 14px;
            margin-left: 10px;
        }


    </style>
    <script src="/js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/js/street/Library.js"></script>
    <%--<script src="/js/base/vconsole.min.js"></script>--%>
    <script>
        if (!window.JSON) {
            window.JSON = {
                parse: function(jsonStr) {
                    return eval('(' + jsonStr + ')');
                },
                stringify: function(jsonObj) {
                    var result = '',
                        curVal;
                    if (jsonObj === null) {
                        return String(jsonObj);
                    }
                    switch (typeof jsonObj) {
                        case 'number':
                        case 'boolean':
                            return String(jsonObj);
                        case 'string':
                            return '"' + jsonObj + '"';
                        case 'undefined':
                        case 'function':
                            return undefined;
                    }

                    switch (Object.prototype.toString.call(jsonObj)) {
                        case '[object Array]':
                            result += '[';
                            for (var i = 0, len = jsonObj.length; i < len; i++) {
                                curVal = JSON.stringify(jsonObj[i]);
                                result += (curVal === undefined ? null : curVal) + ",";
                            }
                            if (result !== '[') {
                                result = result.slice(0, -1);
                            }
                            result += ']';
                            return result;
                        case '[object Date]':
                            return '"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"';
                        case '[object RegExp]':
                            return "{}";
                        case '[object Object]':
                            result += '{';
                            for (i in jsonObj) {
                                if (jsonObj.hasOwnProperty(i)) {
                                    curVal = JSON.stringify(jsonObj[i]);
                                    if (curVal !== undefined) {
                                        result += '"' + i + '":' +curVal + ',';
                                    }
                                }
                            }
                            if (result !== '{') {
                                result = result.slice(0, -1);
                            }
                            result += '}';
                            return result;

                        case '[object String]':
                            return '"' + jsonObj.toString() + '"';
                        case '[object Number]':
                        case '[object Boolean]':
                            return jsonObj.toString();
                    }
                }
            };
        }
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return 'phone';
            } else {
                return 'pc'
            }
        }
        var getObj=$.GetRequest();

        var ditustr='';
        var objwidth='1600',objheight='900';







        if(getObj.type=='zhanshi'){

            $(function () {

                $('.headTop').hide();
                $('.mainBg').css({paddingTop:'0px'})
                $('.mainRight').css({margin:'0px'})
                $('.zhanshiBtn').show();
                $('.btnFixed').show();
                $('.seeVideo').hide();

            })
        }
    </script>

</head>
<body onload="InitMap(function () {
            map.gridMemberInit();

        })" >
<%--<div class="header headTop">--%>
    <%--<ul class="clearfix fl">--%>
        <%--<li class="headTopLi fl Querys active" data-type="0">网格员地图</li>--%>
        <%--<li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>--%>
        <%--<li class="headTopLi fl Querys" data-type="1">社区地图</li>--%>
        <%--<li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>--%>
        <%--<li class="headTopLi fl Querys" data-type="2">网格地图</li>--%>
        <%--<li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>--%>
        <%--<li class="headTopLi fl Querys" data-type="3">监控地图</li>--%>
        <%--<li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>--%>
        <%--<li class="headTopLi fl Querys" data-type="4">企业地图</li>--%>
        <%--<li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>--%>
        <%--<li class="headTopLi fl Querys" data-type="5">环保设施地图</li>--%>
    <%--</ul>--%>
<%--</div>--%>
<%--<ul class="zhanshiBtn">--%>
    <%--<li class="one active" data-type="0">网格员地图</li>--%>
    <%--<li class="one" data-type="1">社区地图</li>--%>
    <%--<li class="one" data-type="2">网格地图</li>--%>
    <%--<li class="one" data-type="3">监控地图</li>--%>
    <%--<li class="one" data-type="4">企业地图</li>--%>
    <%--<li class="one" data-type="5">环保设施地图</li>--%>
<%--</ul>--%>


<div class="btnFixed">

</div>
<div class="seeVideo" style="display: none">
    查看视频
</div>
<div class="qiyeType">
    <ul class="qiye">
        <li class="two active" data-type="01">合格达标</li>
        <li class="two" data-type="02">一般隐患</li>
        <li class="two" data-type="03">突出隐患</li>
        <li class="two" data-type="04">重大隐患</li>
    </ul>
</div>
<div class="mainBg" style="padding-top: 0px;">
    <div style="padding-top:16px;margin-left: 20px;padding-bottom: 10px;position: relative">
        <input type="text" id="textValue" style="width: 250px;height:28px;border-radius: 3px;border:1px solid #E9E7E7;font-size:14px;margin-left: 50px;">
        <button id="query" style="background: #2F8AE3;padding:5px 14px;color:#fff;border-radius: 3px;font-size: 14px;margin-left: 10px;">搜索</button>
        <select name="" id="show" style="width: 180px;height: 28px;border-radius: 3px;">
            <option value="1">显示有楼号的标识</option>
            <option value="2">显示无楼号的标识</option>
        </select>
        <button id="see" style="    background: #2F8AE3;
    padding: 5px 14px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    margin-left: 10px;">查询</button>
        <button class="toggle" style="    background: #2F8AE3;
    padding: 5px 14px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    margin-left: 10px;" dataType="0">楼号显示开关</button>


        <button id="clear" style="    background: #2F8AE3;float:right;margin-right:20px;
    padding: 5px 14px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    margin-left: 10px;">清除</button>
        <button id="ok" style="float:right;    background: #2F8AE3;
    padding: 5px 14px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    margin-left: 10px;">确定</button>
        <ul class="list" style="position: absolute;width:250px;background: #fff;border:1px solid #eee;z-index: 9999;left: 50px;top: 47px;">
            <%--<li>--%>
            <%--<span><img src="../img/fr.png" alt=""></span>--%>
            <%--<span>仓上小区</span>--%>
            <%--</li>--%>
        </ul>
    </div>

    <%--<div style="float: right;margin-top: -40px;margin-right:20px;">--%>

    <%--</div>--%>

    <ul class="mainLeft fl" style="display: none">
        <li>
            石园地图
        </li>
    </ul>
    <div class="mainRight" id="EdushiMap">
    </div>

</div>


<script>
    $(function(){

//        var vConsole = new VConsole();
        $('.btnFixed').click(function () {
            if(parent.bool){
                $(this).addClass('active')
                parent.requestFullScreen(parent.document.getElementById('content'))
            }else {
                $(this).removeClass('active')
                parent.exitFull()
            }
        })
        $('.seeVideo').click(function(){
            window.open('/video/videoPlatform?type=sipingsuiji','_blank')
        })

        $('.headTop ul li').click(function () {
            $('.layui-layer-close1').click();
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
            if($(this).attr('data-type')==0){
                $('.qiyeType').hide();
                map.gridMemberInit();
            }else if($(this).attr('data-type')==1){
                $('.qiyeType').hide();
                map.communityInit();
            }else if($(this).attr('data-type')==2){
                $('.qiyeType').hide();
                map.communityInit(map.theGridinit)
            }else if($(this).attr('data-type')==3){
                $('.qiyeType').hide();
                map.gridMemberInits();
            }else if($(this).attr('data-type')==4){
                $('.qiyeType').show();
                map.gridMemberInits1('01');
            }else if($(this).attr('data-type')==5){
                $('.qiyeType').hide();
                map.environmentalInit();
            }
        })
        $('.zhanshiBtn li').click(function () {
            $('.layui-layer-close1').click();
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
            if($(this).attr('data-type')==0){
                $('.qiyeType').hide();
                $('.seeVideo').hide();
                layer.closeAll()
                map.gridMemberInit();

            }else if($(this).attr('data-type')==1){
                $('.qiyeType').hide();
                $('.seeVideo').hide();
                layer.closeAll()
                map.communityInit();
            }else if($(this).attr('data-type')==2){
                $('.qiyeType').hide();
                $('.seeVideo').hide();
                layer.closeAll()
                map.communityInit(map.theGridinit)
            }else if($(this).attr('data-type')==3){
                $('.qiyeType').hide();
                $('.seeVideo').show();
                layer.closeAll()
                map.gridMemberInits();
            }else if($(this).attr('data-type')==4){
                $('.qiyeType').show();
                $('.seeVideo').hide();
                layer.closeAll()
                map.gridMemberInits1('01');
            }else if($(this).attr('data-type')==5){
                $('.qiyeType').hide();
                $('.seeVideo').hide();
                layer.closeAll()
                map.environmentalInit();
            }
        })
        $('.qiye').on('click','.two',function(){
            $('.layui-layer-close1').click();
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
            var dataType=$(this).attr('data-type');
            if(dataType == 01){
                layer.closeAll()
                map.gridMemberInits1('01');
            }else if(dataType == 02){
                layer.closeAll()
                map.gridMemberInits1('02');
            }else if(dataType == 03){
                layer.closeAll()
                map.gridMemberInits1('03');
            }else if(dataType == 04){
                layer.closeAll()
                map.gridMemberInits1('04');
            }
        })

        $('#query').click(function(){
            var text= $('#textValue').val();
            $('.list').html('')
            map.search(text);
        })

        function getArea(text){
            if(text != ''){
                $.ajax({
                    url:'/gridCheck/queryCoordinatesByName',
                    data:{name:text},
                    dataType:'json',
                    success:function(res){
                        var data=res.data;
                        if(res.flag){
                            var str="";
                            for(var i=0;i<data.length;i++){
                                str += ' <li>' +
                                    '                <span><img src="../img/map/ding.png" alt=""><span class="ding">'+(i+1)+'</span></span>' +
                                    '                <span>'+data[i].moiLabelname+'</span>' +
                                    '            </li>'
                            }
                            $('.list').html(str);
                        }else{
                            $('.list').html('');
                        }

                    }
                })
            }else{
                $('.list').html("");
            }
        }
        function throttle(fn,context,delay,text,mustApplyTime){
            clearTimeout(fn.timeoutId);
            fn.timeoutId = setTimeout(function(){
                fn.call(context,text);
            },delay);
        }

        $('#textValue').keyup(function(){
            var text=$('#textValue').val();
//            getArea(text);
            throttle(getArea, null, 500, text,1000);

        })

        $(document).on('click','.list li',function(){
            var text = $(this).find('span').eq(2).text();
            $('#textValue').val(text);
            $('.list').html('')
            map.search(text);
        })

        $('.toggle').click(function () {
            if($(this).attr('dataType') == 0){
                map.spotlabel()
                $(this).attr('dataType',1)
            }else{

                var arrtwo=$("iframe").contents().find(".hot");
                for(var i=0;i<arrtwo.length;i++){
                    $(arrtwo[i]).parent().remove()
                }
                $(this).attr('dataType',0);
            }
        })
//        console.log($('#EdushiMap'))
        $('#see').click(function(){
            var see=$('#show').val();
            $('.toggle').attr('dataType','1')
            map.spotlabel(see)
        })

        $('#ok').click(function(){
            var name=$(this).attr('dataType');
            var code=$(this).attr('code')
            if(code == undefined && code == ""){
                $.layerMsg({content:'请选取建筑物坐标',icon:6});
                return ;
            }else{
                window.opener.setZuobiao(code)
                window.close();
            }

        })

        $('#clear').click(function(){
            var arrtwo=$("iframe").contents().find(".tips");
            for(var i=0;i<arrtwo.length;i++){
                $(arrtwo[i]).remove()
            }
        })






    })
    //    ditustr="http://61.164.37.199:8003/Default.aspx?mapid=EdushiMap&city=sysq&w="+objwidth+"&h="+objheight+"&x=15380&y=10000&eye=false&e=utf-8&z=1&v=6&zb=true&s=false "
    //    ditustr="http://61.164.37.199:8003/Default.aspx?mapid=allmap&city=sysq&w="+objwidth+"&h="+objheight+"&x=15380&y=10000&eye=false&e=utf-8&z=1&v=0&zb=true&s=false"
    //    $('body').append("<script data-type='ditu' src="+ditustr+"><\/script>");
</script>
</body>

</html>
<script type="text/javascript" src="http://61.164.37.199:8003/Default.aspx?mapid=EdushiMap&city=sysq&w=1900&h=2000&x=17380&y=13000&eye=false&e=utf-8&z=3&v=6&zb=true&s=false"></script>